<template>
  <div>
    <div class="firstLine">
      <el-input class="levelName"
          size="mini"
          placeholder="添加职称..."
          prefix-icon="el-icon-plus"
          v-model="jobLevel.name">
      </el-input>
      <div>
        <el-select v-model="jobLevel.titleLevel" placeholder="职称等级" size="mini" style="margin: 0px 5px 0px 5px">
          <el-option
              v-for="(item,index) in titleLevelShow"
              :key="index"
              :label="item"
              :value="item">
          </el-option>
        </el-select>
        <el-button type="primary" icon="el-icon-plus" size="mini" @click="addJobLevel">添加</el-button>
      </div>
    </div>
    <div>
      <el-table
          :data="tableData"
          stripe
          border
          @selection-change="selectBox"
          class="tableCls">
        <el-table-column
            type="selection"
            width="55">
        </el-table-column>
        <el-table-column
            prop="id"
            label="编号"
            width="55">
        </el-table-column>
        <el-table-column
            prop="name"
            label="职称名称"
            width="150">
        </el-table-column>
        <el-table-column
            prop="titleLevel"
            label="职称级别"
            width="150">
        </el-table-column>
        <el-table-column
            prop="createDate"
            label="创建时间"
            width="180">
        </el-table-column>
        <el-table-column
            label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="editJobLevel">编辑</el-button>
            <el-button type="danger" size="mini" @click="deleteData(scope.row)">删除</el-button>
          </template >
        </el-table-column>
      </el-table>

      <el-button type="danger" size="mini" :disabled="!checkFlag">批量删除</el-button>

      <el-dialog
          title="编辑职位"
          :visible="editJobLevelFlag"
          :before-close="cancleEdit"
          width="20%" >
        <div style="display: flex;
        　　justify-content: center;
        　　align-items: center;">
          <el-input style="width: 180px;"
                    size="mini"
                    placeholder="添加职称..."
                    prefix-icon="el-icon-plus"
                    v-model="jobLevel.name">
          </el-input>
          </div>
          <div  style="display: flex;
              　　justify-content: center;
              　　align-items: center;">
            <el-select v-model="jobLevel.titleLevel" placeholder="职称等级" size="mini" style="margin-top: 5px;width: 180px">
              <el-option
                  v-for="(item,index) in titleLevelShow"
                  :key="index"
                  :label="item"
                  :value="item">
              </el-option>
            </el-select>

        </div>
        <span slot="footer" class="dialog-footer" >
    <el-button @click="cancleEdit" size="mini">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false" size="mini">确 定</el-button>
  </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
name: "proseMana",
  data(){
    return{
      jobLevel:{
        name:'',
        titleLevel:''
      },
      titleLevelShow: ['正高级','副高级','中级','初级','员级'],
      tableData: [],
      checkFlag:false,
      editJobLevelFlag:false
    }
  },
  methods:{
  cancleEdit(){
    this.editJobLevelFlag =false
  },
    editJobLevel(){
      console.log('aaaa');
      this.editJobLevelFlag=true
    },
    addJobLevel(){
      this.putRequest('/system/basic/jobLevel',this.jobLevel).then(resp=>{
        if (resp){
          this.initTableData();
        }
      })
    },
    initTableData(){
      this.getRequest('/system/basic/jobLevel').then(resp=>{
        if (resp){
          console.log(resp);
          this.tableData =resp;
        }
      })
    },
    selectBox(selection){
      if (selection.length>0){
        this.checkFlag = true;
      }else {
        this.checkFlag = false;
      }
    },
    deleteData(row){
      this.$confirm('此操作将删除永久id='+row.id+'的记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteRequest('/system/basic/jobLevel/' + row.id).then(resp=>{
          this.initTableData();
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消操作'
        });
      });

    }
  },
  mounted(){
    this.initTableData();
  }

}
</script>

<style scoped>
.tableCls{
  width: 850px;
  margin-bottom: 5px;
}
.firstLine{
  display: flex;
  justify-content: left;
  margin-bottom: 10px;

}
.levelName{
  width: 250px;
}
</style>